
// Generate Sidebar Caret Style
.sidebar-caret(@style)  {

  .sidebar-menu li > a > span.caret,
  .sidebar-menu li > a.menu-open > span.caret {
      color: inherit;
      width: 20px;
      height: 20px;
      top: 0;
      margin: 0;
      border: 0;
  }
  .sidebar-menu li > a > span.caret:after {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 14px ;
    display: inline-block;
    padding-right: 3px;
    float: right;
    right: 0;
  }
  .sidebar-menu li > a.menu-open > span.caret:after {
      content: "\f107";
  }

  .sidebar-menu li > ul > li > a > span.caret,
  .sidebar-menu li > ul > li > a.menu-open > span.caret {
      top: 11px;
  }

}


// Generate Sidebar Light Skin
.sidebar-light-variant() {
  color: #666;
  background-color: #fafafa;
  border-right: 1px solid #DDD;

   // Top Level Menu Item - Label color 
  .sidebar-menu .sidebar-label {
    color: #AAA;
    font-size: 11px;
    font-weight: 500;
  } 
   // Top Level Menu Item - Caret color 
  .sidebar-menu li > a > span.caret {
    color: #BBB;
  }
  .sidebar-menu li > a.menu-open > span.caret {
    color: #999;
  }

   // Menu Item Links - Color 
  .sidebar-menu > li a  {
    color: #888;
  }

   // Top Level Menu Item - BG Color:hover 
  .sidebar-menu > li > a:hover,
  .sidebar-menu > li > a:focus,
  .sidebar-menu > li > a:active {
      background-color: transparent;
  }
   // Top Level Menu Item - Icon 
  .sidebar-menu > li > a > span:nth-child(1) {
    color: #888;
  }
   // Top Level Menu Item - Title 
  .sidebar-menu > li > a > span:nth-child(2) {
    color: #555;
    font-weight: 500;
    letter-spacing: 0.4px;
  }
   // Top Level Menu Active Item - Icon Color 
  .sidebar-menu > li.active > a > span:nth-child(1) {
      color: @brand-primary;
  }

   // Sub-Menu level BG 
  .sidebar-menu > li > ul {
    background-color: #f2f2f2;
    box-shadow: 0 1px 0 #E5e5e5 inset,0 -1px 0 #E5e5e5 inset;
  }
   // Sub-Menu Level Item - BG Color:hover 
  .sidebar-menu > li > ul > li > a:hover,
  .sidebar-menu > li > ul > li > a:focus {
      background-color: transparent;
  }
   // Sub-Menu Level Active Item - Icon Color 
  .sidebar-menu > li > ul > li.active > a > span:nth-child(1),
  .sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {
      color: @brand-primary;
  }


   // Multi-level menu - BG Color 
  .sidebar-menu > li > ul > li ul {
    background-color: #eaeaea;
    box-shadow: 0 1px 0 #d9d9d9 inset,0 -1px 0 #d9d9d9 inset;
  }
   // Multi-level menu item - BG Color:hover 
  .sidebar-menu > li > ul > li > ul > li > a:hover,
  .sidebar-menu > li > ul > li > ul > li > a:focus {
      background-color: transparent;
  }


   // Top Level item left border 
  .sidebar-menu > li > a.menu-open:after,
  .sidebar-menu > li > ul > li > a.menu-open:after {
      background: transparent;
  }
   // Sub-Menu item left border 
  .sidebar-menu > li > ul > li > a.menu-open:after,
  .sidebar-menu > li > ul > li > ul > li > a.menu-open:after {
      background: @brand-info;
  }
   // Multi level item left border 
  .sidebar-menu > li > ul > li > ul > li.active > a:after,
  .sidebar-menu > li > ul > li > ul > li:hover > a:after,
  .sidebar-menu > li > ul > li > ul > li:focus > a:after {
      background: @brand-warning;
  }

   // Active Menu item Caret 
  .sidebar-menu > li > ul > li.active > a > span.caret {
      color: #AAA;
  }
   // Progress bar background 
  .sidebar-menu .sidebar-stat .progress {
    background-color: #ddd;
  }

  // sidebar toggle close btn
  .sidebar-toggle-mini a {
    background-color: #f7f7f7;
    border-color: #eaeaea;
  }

  // bg-light.light version (pure white)
  &.light {
    background-color: #fff;
    .sidebar-menu > li > ul {
      background-color: #fbfbfb;
    }
    .sidebar-menu > li > ul > li ul {
      background-color: #f5f5f5;
    }
  }

  // Sidebar Author Widget
  .sidebar-widget.author-widget {
    .media-body { color: #666; }
    .media-links a { color: #999; }
    .media-links a:hover { color: #555; }
    &.menu-widget-open .media-links a.sidebar-menu-toggle { color: #555; }
  }
  // Sidebar Menu Widget
  .sidebar-widget.menu-widget {
    background-color: #f2f2f2;
    border-top: 1px solid darken(#f2f2f2, 3%);
    border-bottom: 1px solid darken(#f2f2f2, 3%);
    a span {
      color: #777;
    }
  }
  // Sidebar Search Widget
  .sidebar-widget.search-widget {
    background-color: #f2f2f2;
    border-top: 1px solid darken(#f2f2f2, 3%);
    border-bottom: 1px solid darken(#f2f2f2, 3%);
  }
  
}
